/**
 * desc:modal框展示第三方商品信息html
 * @item {object} 商品的信息
 *
 */
import React from 'react';
import styles from './index.module.less';
import {
  formatImg,
  formatHref,
  formatAmount,
  openUrl,
  renderGoodsName,
} from '@/utils/utils.jsx';
import CommonPlatformImg from '@/components/CommonImg/PlatformComponent';
import { Popover } from 'antd';

export default ({ item = {} }) => {
  const {
    platType,
    ecGoodsCommonId,
    ecGoodsImage,
    ecGoodsName,
    ecSkuName,
    ecGoodsId,
    isCarefullySelected,
  } = item;
  return (
    <div className={styles.wrap}>
      <CommonPlatformImg
        img={ecGoodsImage}
        size="84"
        isCloudIcon={isCarefullySelected == '1' ? true : false}
      />
      <div
        style={{ display: 'flex', flexDirection: 'column', marginLeft: '8px' }}
      >
        {/* <span style={{ whiteSpace: 'pre-wrap' }}>
          {renderGoodsName(platType, ecGoodsName, ecSkuName)}
        </span> */}
        <Popover
          content={
            <div>
              <div className="textOverflowMultiOne">{ecGoodsName}</div>
              <div className="textOverflowMultiTwo">
                {/* {renderGoodsName(platType, ecGoodsName, ecSkuName)} */}
                {ecSkuName}
              </div>
            </div>
          }
        >
          <div style={{ whiteSpace: 'pre-wrap' }}>
            <div className="textOverflowMultiOne">{ecGoodsName}</div>
            <div className="textOverflowMultiTwo">
              {/* {renderGoodsName(platType, ecGoodsName, ecSkuName)} */}
              {ecSkuName}
            </div>
          </div>
        </Popover>
        <span>
          价格：
          <span className="common-color9">
            {formatAmount(item.ecGoodsPrice)}
          </span>
          元
        </span>
        <span>库存: 0 个</span>
        <span>网店SKU编码：{item.outStoreSku}</span>
      </div>
    </div>
  );
};
